<template>
    <div class="aside-rank-wrapper">
        <div class="mine-list" v-for="(item, index) in asideRankData" key="index">
            <h2>{{ item.title }}</h2>
            <ul class="clear-block">
                <li class="mine" :class="currentIndex == index2 + '' + index ? 'z-selected': ''" v-for="(item2, index2) in item.list" key="index2" @click="select(index2 + '' + index)">
                    <div class="item clear-block">
                        <div class="left">
                            <router-link :to="item2.route" class="avatar">
                                <img :src="item2.imgUrl" :alt="item2.name">
                                <span class="mask"></span>
                            </router-link>
                        </div>

                        <p class="name">
                            <router-link :to="item2.route" class="s-fc0">{{ item2.name }}</router-link>
                        </p>
                        <p class="s-fc4">{{ item2.time }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import asideRankData from '@/json_data/top_list/aside_rank_data.json'
import { ref } from 'vue';
const currentIndex = ref('')
const select = (index) =>{
    currentIndex.value = index
}
</script>
<style lang="scss" scoped>
.aside-rank-wrapper {
    float: left;
    width: 240px;

    .mine-list {
        margin-top: 40px;

        li.z-selected {
            background: #e6e6e6;
            &:hover{
                background-color: #e6e6e6;
            }

        }

        ul * {
            cursor: pointer;
            vertical-align: middle;
        }

        h2 {
            padding: 0 10px 12px 15px;
            font-size: 14px;
            color: #000;
            font-family: simsun, \5b8b\4f53;
        }

        li {
            padding: 10px 0 10px 20px;
            position: relative;
            zoom: 1;
            height: 42px;

            &:hover{
                background-color:  #f4f2f2;
            }

            .item {
                padding-left: 50px;

                .left {
                    display: inline;
                    float: left;
                    margin-left: -50px;
                    overflow: hidden;
                    width: 40px;

                    .avatar {
                        display: block;
                        position: relative;
                        width: 40px;
                        height: 40px;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        .mask {
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-position: -310px -330px;
                        }
                    }
                }

                .name {
                    width: 150px;
                    overflow: hidden;
                    margin-top: 2px;
                    margin-bottom: 8px;

                    a {
                        white-space: nowrap;
                    }
                }


            }

        }

    }
}
</style>